<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Bootstrap 101 Template</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <style>
    .container .row div{
      line-height: 50px;
      background-color: #ccc;
      text-align: center;
      border: 1px solid lightgreen;
    }
  </style>
</head>
<body>
<!-- 
  栅格系统：主要用于响应式布局
  栅格系统每一行row自动分为最多12列
  通过栅格系统的预定义类来进行布局和空间划分
  栅格系统中的行row必须包含在 container 容器中
  预定义类对应的媒体查询尺寸：
  col-xs-x  屏幕 < 768
  col-sm-x  屏幕 > 768 && 屏幕 < 992
  col-md-x  屏幕 > 992 && 屏幕 < 1200
  col-lg-x  屏幕 > 1200
  x是一个整数，数值范围为 1-12
 -->

<div class="container">
  <h1>固定宽度的容器</h1>
  <div class="row">
    <div class="col-md-1">md-1</div>
    <div class="col-md-1">md-1</div>
    <div class="col-md-1">md-1</div>
    <div class="col-md-1">md-1</div>
    <div class="col-md-1">md-1</div>
    <div class="col-md-1">md-1</div>
    <div class="col-md-1">md-1</div>
    <div class="col-md-1">md-1</div>
    <div class="col-md-1">md-1</div>
    <div class="col-md-1">md-1</div>
    <div class="col-md-1">md-1</div>
    <div class="col-md-1">md-1</div>
  </div>
  <div class="row">
    <div class="col-md-6">md-6</div>
    <div class="col-md-6">md-6</div>
  </div>
  <div class="row">
    <div class="col-md-3 col-sm-5 col-xs-4">md-3</div>
    <div class="col-md-4 col-sm-4 col-xs-4">md-4</div>
    <div class="col-md-5 col-sm-3 col-xs-4">md-5</div>
  </div>

  <!-- 多余12列会另起一行 -->
  <div class="row">
    <div class="col-md-4">md-4</div>
    <div class="col-md-6">md-6</div>
    <div class="col-md-4">md-4</div>
  </div>

  <!-- 列偏移 -->
  <div class="row">
    <div class="col-md-4">md-4</div>
    <div class="col-md-4 col-md-offset-2">md-4</div>
  </div>

  <!-- 列嵌套 -->
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-4">md-4</div>
        <div class="col-md-4">md-4</div>
        <div class="col-md-4">md-4</div>
      </div>
    </div>
    <div class="col-md-6">md-6</div>
  </div>

  <!-- 列排序 -->
  <div class="row">
    <div class="col-md-3 col-md-push-9">md-3</div>
    <div class="col-md-9 col-md-pull-3">md-9</div>
  </div>

</div>
<div class="container-fluid">
  <h1>100%宽度的容器</h1>
</div>

</body>
</html>